/*
 * @Description:
 * @Author: Zzt
 * @Date: 2022-08-30 14:55:57
 * @LastEditTime: 2023-03-09 11:47:19
 */

import { useEffect, useState } from 'react';
import classNames from 'classnames/bind';
import { FileSearchOutlined } from '@ant-design/icons';
import EntrySearchFrame from './components/EntrySearchFrame';
import FullSearchFrame from './components/FullSearchFrame';
import SearchLimit from '../../components/SearchLimit/SearchLimit';
import { Checkbox } from 'antd';
import DropdownSearch from './DropdownSearch';
import styles from './styles/SearchWarp.module.scss';
import ImageSearchFrame from './components/ImageSearchFrame';
import AudioSearchFrame from './components/AudioSearchFrame';

const cx = classNames.bind(styles);

/* 复单选框 */
const options = [
  { label: '精确匹配', value: 'exactMatch' },
  { label: '原文匹配', value: 'originalMatch' }
];

const SearchWarp = (props: any) => {
  const { getCondition, getFieldConditionList, conditions, fieldConditionList, type } = props;
  const [checkValue, setCheckValue] = useState([]);
  /* 调整限定条件结构 */
  const [searchConditions, setSearchConditions] = useState([]);
  const navChange = ({ fieldConditionList, atConditionList }: any) => {
    // console.log('atConditionList', atConditionList);
    getCondition(
      atConditionList.map((item: any) => ({
        fondId: item.fondId,
        atConditionList: item.archiveTypeIdList.map((item: any) => ({ archiveTypeId: item }))
      }))
    );
    getFieldConditionList(fieldConditionList);
  };

  const onChange = (event: any) => {
    setCheckValue(event);
  };

  useEffect(() => {
    // console.log(conditions);
    if (conditions.length === 0) return;
    setSearchConditions(
      conditions.map((item: any) => ({
        fondId: item.fondId,
        archiveTypeIdList: item.atConditionList.map((item: any) => item.archiveTypeId)
      }))
    );
  }, [conditions]);
  /* 检索输入选择 */
  const search = (value: any) => {
    switch (value) {
      case 1:
        return (
          <EntrySearchFrame
            type={type}
            match={checkValue}
            fieldConditionList={fieldConditionList}
            conditions={conditions}
          />
        );
      case 2:
        return <FullSearchFrame fieldConditionList={fieldConditionList} conditions={conditions} />;
      case 3:
        return '';
      case 4:
        return <ImageSearchFrame fieldConditionList={fieldConditionList} conditions={conditions} />;
      case 5:
        return <AudioSearchFrame fieldConditionList={fieldConditionList} conditions={conditions} />;
      case 6:
        return (
          <EntrySearchFrame
            type={type}
            match={checkValue}
            fieldConditionList={fieldConditionList}
            conditions={conditions}
          />
        );
      default:
        return '';
    }
  };

  return (
    <div className={cx('advance-container')}>
      <div className={cx('search-title')}>
        <h4>
          <FileSearchOutlined />
          <DropdownSearch type={type} />
        </h4>
      </div>
      <div className={cx(type !== 4 ? 'search-frame' : 'image-frame')}>
        <div className={cx(type !== 4 ? 'search-Search' : 'image-search')}>{search(type)}</div>
        {[1, 6].find((item) => item === type) ? (
          <div className={cx('search-Check')}>
            <Checkbox.Group options={options} onChange={onChange} value={checkValue} />
          </div>
        ) : (
          ''
        )}
      </div>
      <div className={cx('limit')}>
        <div className={cx('outLine')}>
          <div className={cx('close')}>
            <b>条件限定</b>
          </div>
          <SearchLimit onChange={navChange} type="full" conditions={searchConditions} />
        </div>
      </div>
    </div>
  );
};
export default SearchWarp;
